<template>
  <div class="app-container app-container-next app-container-detail order_detail">
    <el-card class="box-card" shadow="false">
      <div slot="header" style="display: flex;justify-content: space-between;align-items: center">
        <router-link :to="{name: $route.query.type  === 'recall' ?  'order-recall' : 'order-list'}">
          <el-button plain icon="el-icon-back" size="small" :round="true">
            返回
          </el-button>
        </router-link>
        <div>
          <el-tooltip class="item" effect="dark" placement="top" v-if="order.lastId">
            <div slot="content" v-html="'上一个'"></div>
            <i class="el-icon-back" @click="lastId(order.lastId)"  style="margin-right: 10px;font-size: 28px"></i>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" placement="top" v-if="order.nextId">
            <div slot="content" v-html="'下一个'"></div>
            <i class="el-icon-right" @click="nextId(order.nextId)"  style="margin-left: 10px;font-size: 28px"></i>
          </el-tooltip>
        </div>

      </div>

      <div class="details" v-loading="loadPage" :class="{'isMobile': isMobile}">
        <div class="order_and_fulfillment">
          <div class="order">
            <div class="header">
              <div class="order_id_tag">
                <div class="order_no">{{ order.orderNumber }}</div>
                <div class="time">创建时间： {{ order.createDate|utcFormat('YYYY-MM-DD HH:mm:ss', this.timeZone) }}</div>
                <div class="time">成功下单： {{ order.paymentTime|utcFormat('YYYY-MM-DD HH:mm:ss', this.timeZone) }}</div>
              </div>
              <div class="order_id" @click="handleGoFront">订单ID: {{ order.orderNumber }}</div>
              <div class="order_id">
                <span v-if="order.payType==='PayPal'">支付订单号: {{ order.paymentId }}</span>
                <span v-else>支付订单号: {{ order.payNumber }}</span>
              </div>
              <div class="tag_list">
                <div class="tag_list_left">
                  <!--                  <span class="tag tag_status_placed">进行中</span>-->
                  <span class="tag tag_pay_status_paid"
                        :class="{'tag_ship_status_waiting': order.payStatus === 1, 'tag_pay_status_paid': order.payStatus === 3}">{{
                      order.payStatus === 3 ? '已支付' : order.payStatusText
                    }}</span>
                  <span class="tag tag_ship_status_waiting"
                        :class="{'tag_pay_status_paid': order.logisticsStatus === 4, 'tag_ship_status_waiting': order.logisticsStatus === 1, 'tag_status_placed': order.logisticsStatus === 3}">{{
                      order.statusText
                    }}</span>
                </div>
              </div>
            </div>
            <div class="price_info_wrap">
              <div class="price_info_header">
                <div class="price_info_header_label">订单价格详情</div>
              </div>
              <div class="price_info">
                <div class="price_details">
                  <div class="price_details_item"><label>商品总价</label>
                    <div class="price"><span v-if="order.sellPrice">{{ order.sellPrice|currency(order.currencySymbol || '$') }}</span></div>
                  </div>
                  <div class="price_details_item"><label>满减优惠</label>
                    <div class="price">
                      <span v-if="order.priceReducePromotionAmount">-{{
                          order.priceReducePromotionAmount|currency(order.currencySymbol || '$')
                        }}</span>
                      <span v-else>{{order.currencySymbol || '$'}}0.00</span>
                    </div>
                  </div>
                  <div class="price_details_item"><label>优惠码优惠</label>
                    <div class="price">
                      <span
                          v-if="order.couponCodePromotionAmount">-{{
                          order.couponCodePromotionAmount|currency(order.currencySymbol || '$')
                        }}</span>
                      <span v-else>{{order.currencySymbol || '$'}}0.00</span></div>
                  </div>
                  <div class="price_details_item"><label>支付优惠</label>
                    <div class="price">
                      <span
                          v-if="order.creditPromotionAmount">-{{
                          order.creditPromotionAmount|currency(order.currencySymbol || '$')
                        }}</span>
                      <span v-else>{{order.creditPromotionAmount || '$'}}0.00</span></div>
                  </div>
                  <div class="price_details_item"><label>物流费用</label>
                    <div class="price"><span v-if="order.freightAmount">{{ order.freightAmount|currency(order.currencySymbol || '$') }}</span>
                      <span v-else>{{order.currencySymbol || '$'}}0.00</span></div>
                  </div>
                  <div class="price_details_item"><label>税费</label>
                    <div class="price"><span v-if="order.taxAmount">{{ order.taxAmount|currency(order.currencySymbol || '$') }}</span>
                      <span v-else>{{order.currencySymbol || '$'}}0.00</span></div>
                  </div>
                </div>
                <div class="price_total">
                  <div class="price_total_item">总价： <span v-if="order.payAmount">{{
                      order.payAmount|currency(order.currencySymbol || '$')
                    }}</span></div>
                  <div class="pay_info">
                    <div class="tag"
                         :class="{'tag_ship_status_waiting': order.payStatus === 1, 'tag_pay_status_paid': order.payStatus === 3}">
                      {{ order.payStatus === 3 ? '已支付' : order.payStatusText }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="product_list">
              <div class="product_item" v-for="(row, index) in order.orderItemList" :key="index">
                <div class="item_no">{{ index + 1 }}</div>
                <div class="image_tag">
                  <img :src="parseJson(row.customizedJson).customizedFrontImage.effectImgUrl || row.skuImage" alt=""
                       style="width: 115px; height: 152px;object-fit: cover" v-if="row.spuType === '1'" class="image">
                  <img class="image" :src="row.skuImage" v-else/>
                </div>
                <div class="info" @click="handlePreview(row.spuId)">
                  <span>{{ row.spuName }}</span>
                  <div class="info_item"><span class="tooltip_span">{{ row.properties }}</span></div>
                  <div class="info_item"><span class="tooltip_span">SKU:  {{ row.skuCode }}</span></div>
                  <div class="info_item"
                       v-if="row.spuType === '1' && parseJson(item.customizedJson) && (parseJson(row.customizedJson).customizeType !== '1' && parseJson(row.customizedJson).customizeType !== '2')">
                    (Text:{{ parseJson(row.customizedJson).customizedText }})
                  </div>
                  <!--                  <div class="info_item">SPU: 无</div>
                                    <div class="info_item">供应商: 无</div>-->
                </div>
                <div class="product_tag_wrap">
                  <div style="display: flex;">
                    <div class="tag tag_fulfillment_status_waiting" v-if="row.logisticsStatus === 1">待发货</div>
                    <div class="tag tag_status_placed" v-if="row.logisticsStatus === 11">待收货</div>
                    <div class="tag tag_pay_status_paid" v-if="row.logisticsStatus === 12">已完成</div>
                  </div>
                </div>
                <div class="num"> {{ row.sellPrice|currency(order.currencySymbol || '$') }} x {{ row.quantity }}</div>
                <div class="total_price"> {{ row.totalPrice|currency(order.currencySymbol || '$') }}</div>
              </div>
            </div>
          </div>
          <div class="shipping_detail">
            <div class="head shipping_detail_title">
              <div class="head_left"><p class="title" style="padding: 16px 0px;">物流状态</p></div>
              <div class="button_list">
                <el-button size="mini" v-if="order.status===2" type="primary" @click="showAddLogisticsOrder">去发货
                </el-button>
              </div>
            </div>
            <div class="no_shipping" v-if="!order.orderLogisticsList.length"><img
                :src="require('/src/assets/images/no_shipping.png')">暂无物流状态，请安排发货
            </div>
            <el-table :data="order.orderLogisticsList" fit highlight-current-row v-if="order.orderLogisticsList.length">
              <el-table-column align="center" label="运单号">
                <template slot-scope="{row}">
                  {{ row.logisticsSn }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="物流商">
                <template slot-scope="{row}">
                  {{ row.logisticsCompany }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="发货时间">
                <template slot-scope="{row}">
                  {{ row.deliveryTime|utcFormat('YYYY-MM-DD HH:mm:ss', timeZone) }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="确认时间">
                <template slot-scope="{row}">
                  {{ row.confirmTime|utcFormat('YYYY-MM-DD HH:mm:ss', timeZone) }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="物流状态">
                <template slot-scope="{row}">
                  {{ row.statusText }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作">
                <template slot-scope="{row}">
                  <el-button v-if="row.status == 11" type="primary"
                             @click="confirmOrderLogistics(row)" :loading="row['submitLoading']">确认收货
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <h4 v-if="order.recallStatus!==null" style="margin-bottom: 0">召回信息</h4>
          <table class="el-table">
            <thead>
            <tr>
              <th class="cell is-leaf">时间</th>
              <th class="cell is-leaf">信息</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item, index) in order.orderRecallList" :key="index" class="el-table__row">
              <td class="cell"> {{ item.createDate|utcFormat('YYYY-MM-DD HH:mm:ss', timeZone) }}</td>
              <td class="cell"> {{ item.stepText }}</td>
            </tr>
            </tbody>

          </table>
          <!--          <el-table :data="order.orderRecallList" fit highlight-current-row v-if="order.recallStatus!==null" style="position:absolute;width: 100%">
                      <el-table-column align="center" label="时间">
                        <template slot-scope="{row}">
                          {{ row.createDate|utcFormat('YYYY-MM-DD HH:mm:ss', timeZone) }}
                        </template>
                      </el-table-column>
                      <el-table-column align="center" label="信息">
                        <template slot-scope="{row}">
                          {{ row.stepText }}
                        </template>
                      </el-table-column>
                    </el-table>-->
        </div>
        <div class="user">
          <div class="shipping_info">
            <div class="title">购买人信息</div>
            <div>
              <div class="info_line">
                <div class="name">{{ order.name }}</div>
              </div>
              <div class="userinfo_item">{{ order.email }}</div>
              <div class="userinfo_item"></div>
            </div>
            <div class="line"></div>
            <div class="payment">
              <div class="title" style="min-width: 100px;">支付方式</div>
              <div class="payway">{{ order.payType }}</div>
            </div>
            <div class="line"></div>
            <div class="payment">
              <div class="title">物流方案</div>
              <div class="payway"> {{ order.freightDetailName }}</div>
            </div>
            <!--            <div class="line"></div>
                        <div class="payment">
                          <div class="title">访问IP</div>
                          <div class="payway">142.40.150.2</div>
                        </div>
                        <div class="line"></div>
                        <div class="payment">
                          <div class="title">售卖平台</div>
                          <div class="payway">Shoplazza</div>
                        </div>-->
            <div class="line"></div>
            <div class="payment">
              <div class="title">订单来源</div>
              <div class="payway"> {{ order.orderSource }}</div>
            </div>
            <div class="line"></div>
            <div class="payment">
              <div class="title">渠道来源</div>
              <div class="payway">{{ order.channelSource }}</div>
            </div>
            <div class="line"></div>
            <div class="payment">
              <div class="title">支付域名</div>
              <div class="payway">{{ order.orderSourceDomain }}</div>
            </div>
            <div class="line"></div>
            <div class="address">
              <div class="title">收货信息</div>
              <div class="info_list">
                <div class="info_item">姓：{{ order.firstName }}</div>
                <div class="info_item">名：{{ order.lastName }}</div>
                <div class="info_item">电话：{{ order.phone }}</div>
                <div class="info_item">邮箱：{{ order.email }}</div>
                <div class="info_item">国家/地区：{{ order.country }}</div>
                <div class="info_item">省份：{{ order.province }}</div>
                <div class="info_item">城市：{{ order.city }}</div>
                <div class="info_item">街道：{{ order.street }}</div>
                <div class="info_item">邮编：{{ order.postCode }}</div>
              </div>
            </div>
            <!--            <div class="line"></div>
                        <div class="message">
                          <div class="title">留言说明</div>
                          <div class="message_content"></div>
                        </div>-->
          </div>
        </div>
      </div>
    </el-card>
    <el-dialog :visible.sync="logisticsVisible" title="创建运单">
      <el-row>
        <el-table :data="deliveryItemList" fit highlight-current-row @selection-change="handleSelectionChange"
                  size="mini">
          <el-table-column type="selection"></el-table-column>
          <el-table-column align="center" label="图片" prop="skuPic" width="80px">
            <template slot-scope="{row}">
              <img :src="parseJson(row.customizedJson).customizedFrontImage.effectImgUrl || row.skuImage" alt=""
                   style="height: 60px;object-fit: cover" v-if="row.spuType === '1'" class="image">
              <img class="image" :src="row.skuImage" style="height:60px" v-else/>
            </template>
          </el-table-column>
          <el-table-column align="center" label="商品名称" prop="spuName">
            <template slot-scope="{row}">
              <div
                  style="overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;;">
                {{ row.spuName }}
              </div>
              <div class="info_item"
                   v-if="row.spuType === '1' && parseJson(row.customizedJson) && (parseJson(row.customizedJson).customizeType === '3' || parseJson(row.customizedJson).customizeType === '4' || parseJson(row.customizedJson).customizeType === '5')">
                (Text:{{ parseJson(row.customizedJson).customizedText }})
              </div>

            </template>
          </el-table-column>
          <el-table-column align="center" label="SKU" prop="skuCode">
            <template slot-scope="{row}">
              {{ row.skuCode }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="规格" prop="specifications">
            <template slot-scope="{row}">
              {{ row.properties }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="数量" prop="skuQuantity">
            <template slot-scope="{row}">
              {{ row.quantity }}
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-form ref="logisticsForm" inline :model="logistics" :rules="logisticsRules" label-width="120px"
               style="padding: 0;margin-top: 10px">
        <template>
          <el-form-item label="运单号：" prop="logisticsSn">
            <el-input v-model="logistics.logisticsSn" placeholder="请输入运单号" style="width: 193px"/>
          </el-form-item>
          <el-form-item label="物流商：" prop="logisticsCompany">
            <el-input v-model="logistics.logisticsCompany" placeholder="请输入物流商" style="width: 193px"/>
          </el-form-item>
        </template>
      </el-form>
      <div style="text-align: right">
        <el-button type="primary" @click="addLogisticsOrder('logisticsForm')" :loading="submitLoading">
          保存
        </el-button>
        <el-button @click="handleLogisticsOrderReset('logisticsForm')">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getOrder, addOrderLogistics, confirmOrderLogistics} from '@/api/order';
import {mapGetters} from 'vuex';

export default {
    name: 'order-detail',
    data () {
        return {
            loadPage: false,
            order: {
                id: '',
                orderNumber: '',
                createDate: '',
                totalItemNum: '',
                payType: '',
                sourceType: '',
                sellPrice: '',
                name: '',
                phone: '',
                country: '',
                recallStatus: '',
                payAmount: '',
                freightAmount: '',
                orderItemList: [],
                orderLogisticsList: [],
                orderRecallList: [],
                priceReducePromotionAmount: '',
                couponCodePromotionAmount: '',
                taxAmount: '',
                lastId: '',
                nextId: ''
            },
            selectedIdList: [],
            logistics: {
                logisticsSn: '',
                logisticsCompany: '',
                orderItemIds: ''
            },
            logisticsVisible: false,
            logisticsRules: {
                logisticsSn: [
                    {required: true, message: '请填写运单号', trigger: 'blur'}
                ],
                logisticsCompany: [
                    {required: true, message: '请填写物流商', trigger: 'blur'}
                ]
            },
            submitLoading: false,
            deliveryItemList: []
        };
    },
    watch: {
        '$route': {
            handler: 'getOrder',
            immediate: true
        }
    },
    methods: {
        parseJson (value) {
            return JSON.parse(value);
        },
        lastId (id) {
            if (id) {
                this.$router.push({name: 'order-detail', params: {id}, query: this.$route.query});
            }
        },
        nextId (id) {
            if (id) {
                this.$router.push({name: 'order-detail', params: {id}, query: this.$route.query});
            }
        },
        getOrder () {
            let param = {
                orderId: this.orderId,
                siteId: this.siteId
            };
            this.loadPage = true;
            getOrder(param).then(res => {
                if (res.orderLogisticsList.length) {
                    res.orderLogisticsList.forEach((val) => {
                        val.submitLoading = false;
                    });
                }
                this.order = res;
                this.loadPage = false;
            }).catch(() => {
                this.loadPage = false;
            });
        },
        handleSelectionChange (records) {
            if (records && records.length > 0) {
                let tempIdList = [];
                records.forEach(item => {
                    tempIdList.push(item.id);
                });
                this.selectedIdList = tempIdList;
                this.logistics.orderItemIds = this.selectedIdList.join(',');
            } else {
                this.selectedIdList = [];
                this.logistics.orderItemIds = '';
            }
        },
        showAddLogisticsOrder () {
            this.deliveryItemList = [];
            let itemList = this.order.orderItemList;
            if (itemList == null || itemList.length <= 0) {
                this.$message.error('当前没有商品可以发货');
                return false;
            }
            itemList.forEach(item => {
                if (item.logisticsStatus === undefined || item.logisticsStatus == null || item.logisticsStatus === 1) {
                    this.deliveryItemList.push(item);
                }
            });
            if (this.deliveryItemList.length <= 0) {
                this.$message.error('当前订单的商品可能已经全部发货，无需重复操作');
                return false;
            }
            this.logisticsVisible = true;
        },
        addLogisticsOrder (name) {
            if (this.selectedIdList == null || this.selectedIdList.length === 0) {
                this.$message.error('请先选择需要发货的商品！');
                return false;
            }
            this.$refs[name].validate(valid => {
                if (valid) {
                    this.submitLoading = true;
                    this.logistics.orderId = this.order.id;
                    addOrderLogistics(this.logistics).then(res => {
                        this.handleLogisticsOrderReset(name);
                        this.submitLoading = false;
                        this.getOrder();
                    });
                }
            });
        },
        handleLogisticsOrderReset (name) {
            this.$refs[name].resetFields();
            this.logisticsVisible = false;
            this.deliveryItemList = [];
        },
        confirmOrderLogistics (row) {
            this.$confirm('确认已经收到货了吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                row.submitLoading = true;
                confirmOrderLogistics(this.order.id, row.id).then(res => {
                    this.getOrder();
                    row.submitLoading = false;
                });
            });
        },
        handlePreview (id) {
            let url = '#/goods-management/goods/detail/' + id + (this.$route.query.siteName ? '?siteName=' + this.$route.query.siteName : '');
            window.open(url, '_blank');
        },
        handleGoFront () {
            let url = 'https://' + this.siteInfo.domainName + '/personal/orderDetail?id=' + this.order.orderNumber;
            window.open(url, '_blank');
        }
    },
    mounted () {
    },
    computed: {
        ...mapGetters(['timeZone', 'siteList', 'isMobile']),
        siteId () {
            return this.$store.state.user.siteId;
        },
        orderId () {
            return this.$route.params.id;
        },
        siteInfo () {
            let info = this.siteList.find(res => res.id === Number(this.siteId));
            return info;
        }
    }
};
</script>

<style scoped lang="scss">
.amount {
  text-align: right;

  span, label {
    display: inline-block;
  }

  span {
    width: 100px;
    text-align: right;
  }

  label {
    width: 80px;
    text-align: left;
    color: #409EFF;
  }
}

.order_detail {
  .details {
    width: 100%;
    display: flex;

    .order_and_fulfillment {
      flex: 1 0 740px;

      .order {
        background: #ffffff;
        position: relative;

        .header {
          font-size: 12px;
          line-height: 20px;

          .order_id_tag {
            display: flex;
            align-items: center;

            .order_no {
              line-height: 25px;
              font-size: 18px;
            }

            .time {
              margin-left: 10px;
              font-size: 12px;
              color: #7e849c;
            }
          }

          .order_id {
            font-size: 14px;
            padding: 5px 0;
          }

          .tag_list {
            margin: 5px 0;
            display: flex;
            justify-content: space-between;

            .tag_list_left {
              display: flex;
              flex: 1;
              flex-wrap: wrap;
              align-items: center;

              .tag {
                margin-right: 10px;
              }
            }
          }
        }

        .price_info_wrap {
          margin-top: 12px;
          border-top: 1px solid #d8deec;
          padding: 20px 0;
          display: flex;
          flex-direction: column;
        }

        .price_info_header {
          margin-bottom: 10px;
          width: 100%;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
        }

        .price_info_header_label {
          text-align: left;
          line-height: 20px;
          font-size: 14px;
          font-weight: 500;
          color: #30344f;
        }

        .price_info {
          display: flex;
          flex-direction: row;
          align-items: center;

          .price_details {
            width: 330px;

            .price_details_item {
              line-height: 25px;
              font-size: 14px;
              display: flex;
              justify-content: space-between;
              align-items: center;

              label {
                max-width: 200px;
              }

              .price {
                text-align: right;
              }
            }
          }

          .price_total {
            margin-left: 107px;

            .price_total_item {
              line-height: 25px;
              font-size: 14px;
              font-weight: bold;
            }

            .pay_info {
              display: flex;
              align-items: center;
              margin-top: 7px;
            }
          }
        }

        .product_list {
          border-top: 1px solid #d8deec;

          .product_item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 0;
            position: relative;
            transform: translateZ(0);

            .item_no {
              width: 45px;
              flex: 0 0 35px;
              font-size: 16px;
            }

            .image_tag {
              width: 64px;
              flex: 0 0 64px;
              display: flex;
              flex-direction: column;
              align-items: center;

              .image {
                width: 64px;
                height: 64px;
                flex: 0 0 64px;
              }

              .tag {
                margin-top: 10px;
              }
            }

            .info {
              width: 200px;
              margin-left: 24px;
              flex: 1 0 200px;
              margin-right: 24px;

              .name {
                color: #30344f;
                font-weight: bold;
                line-height: 18px;
                font-size: 12px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                text-decoration: none;
                word-break: break-all;
              }

              .info_item {
                font-size: 12px;
                color: #7a7d90;
                line-height: 18px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
            }

            .product_tag {
              width: 70px;
              height: 24px;
              background: #eef0f4;
              border-radius: 3px;
              padding: 2px 5px;
              margin: 0 5px;
              text-align: center;
              overflow: hidden;
              text-overflow: ellipsis;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              white-space: nowrap;
            }

            .num {
              text-align: right;
              flex: 0 0 110px;
              margin-left: 13px;
            }

            .total_price {
              text-align: right;
              flex: 0 0 110px;
            }
          }
        }
      }

      .shipping_detail {
        .shipping_detail_title {
          display: flex;
          align-items: center;
          height: 70px;
          justify-content: flex-start;

          .head_left {
            display: inline-flex;
            align-items: center;
            line-height: 30px;

            .title {
              color: #30354d;
              font-size: 22px;
              margin-right: 24px;
            }
          }
        }

        .no_shipping {
          height: 160px;
          background: #fff;
          line-height: 160px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 14px;
          color: #30344f;
        }
      }

    }

    .user {
      margin-left: 20px;
      display: flex;
      flex-direction: column;
      flex: 0 0 380px;

      .shipping_info {
        background: #f8f9fb;
        padding: 20px 30px 15px 30px;

        .info_line {
          margin-top: 12px;
          padding-bottom: 4px;
          display: flex;
          align-items: center;
          line-height: 20px;
        }

        .userinfo_item {
          margin-top: 5px;
          font-size: 14px;
          line-height: 20px;
        }

        .line {
          width: 100%;
          height: 1px;
          margin: 15px 0;
          background: #d8deec;
        }

        .payment, .channel {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .payway {
            font-size: 14px;
            word-break: break-word;
            text-align: right;
          }
        }

        .address {
          .info_list {
            margin-top: 17px;

            .info_item {
              font-size: 14px;
              line-height: 40px;
              word-break: break-all;
            }
          }
        }

        .message {
          min-height: 135px;

          .message_content {
            margin-top: 10px;
            height: 60px;
            overflow-y: scroll;
            line-height: 20px;
            font-size: 14px;
            max-width: 320px;
            word-break: break-all;
          }
        }
      }

      .title {
        line-height: 25px;
        font-size: 18px;
        color: #30354d;
        min-width: 140px;
      }
    }
  }

  .tag {
    padding: 0 5px;
    height: 16px;
    line-height: 14px;
    font-size: 11px;
    border-radius: 2px;
    color: #aeaeae;
    border: 1px solid #aeaeae;
  }

  .tag_status_placed {
    color: #db6060;
    border: 1px solid #db6060;
  }

  .tag_pay_status_refunded, .tag_pay_status_paid {
    color: #4e9969;
    border: 1px solid #4e9969;
  }

  .tag_ship_status_waiting, .tag_fulfillment_status_waiting {
    color: #f98c00;
    border: 1px solid #f98c00;
  }

  .product_tag_wrap {
    flex: 1 0 50px;
  }
}
.isMobile{
  &.details{
    flex-wrap: wrap;
    .order_and_fulfillment{
      flex: 1 !important;

    }
    .user{
      margin-left: 0 !important;
      margin-top: 10px;
      flex:1 !important;
    }
    .shipping_detail{
      display: none;
    }
  }
}
</style>
